
app.views.ListView = Ext.extend(Ext.Panel, {
	dockedItems: [{
		title: 'Check Lists',
		xtype: 'toolbar',
		items: [
			{
				iconCls: 'info',
				iconMask: true,
				ui: 'plain'
			}
		]
		
	},
	{
		dock : 'bottom',
		xtype: 'toolbar',
		ui   : 'light',
		items: [
			
			{
				iconCls: 'add1',
				iconMask: true,
				ui: 'plain',
				text: 'add',
				listeners: {
					'tap': function() {
						Ext.dispatch({
							controller: app.controllers.ListController,
							action: 'createNewList',
							animation: {type: 'slide', direction: 'left'}
						});
					}
				}
			},
			{
				iconCls: 'compose',
				iconMask: true,
				ui: 'plain',
				text: 'edit',
				listeners: {
					'tap': function() {
						var allLists = app.views.ListView.items.items[0];
						var selRecords = allLists.getSelectedRecords();
						if (selRecords && selRecords.length == 1) {
							var rcd = selRecords[0];
							
							var id = rcd.get('id');
							
							console.log('selected id is ' + id);
							
							Ext.dispatch({
								controller: app.controllers.ListController,
								id: id,
								action: 'editList',
								animation: {type: 'slide', direction: 'left'}
							});						
						}
						else {
							alert('Please choose the list you want to edit.');
						}
					}
				}
			},
			
			{
				iconCls: 'download',
				iconMask: true,
				ui: 'plain',
				text: 'sync',
				listeners: {
					'tap': function() {
						/*
						Ext.dispatch({
							controller: app.controllers.ListController,
							action: 'createNewList',
							animation: {type: 'slide', direction: 'left'}
						});
						*/
					}
				}
			},
			
			{
				iconCls: 'settings',
				iconMask: true,
				ui: 'plain',
				text: 'settings',
				listeners: {
					'tap': function() {
						/*
						Ext.dispatch({
							controller: app.controllers.ListController,
							action: 'createNewList',
							animation: {type: 'slide', direction: 'left'}
						});
						*/
					}
				}
			}

		]
	}],
	
	items: [{
		xtype: 'list',
		store: app.stores.checkLists,
		
	
		itemTpl: new Ext.XTemplate(
					'<div class="l-summary">',
						'<tpl if="total == 0">',
							'<div class="l-list-title l-empty-list">',
								'{listName}', 
							'</div>',
							'<div class="l-list-summary l-empty-list">',
								'Empty',
							'</div>',
						'</tpl>',
						'<tpl if="total == checked && total &gt; 0">',
							'<div class="l-list-title l-compl-list">',
								'{listName}', 
							'</div>',
							'<div class="l-list-summary l-compl-list">',
								'{checked} / {total}',
							'</div>',
						'</tpl>',
						'<tpl if="total != checked && total &gt; 0">',
							'<div class="l-list-title">',
								'{listName}', 
							'</div>',
							'<div class="l-list-summary">',
								'{checked} / {total}',
							'</div>',
						'</tpl>',
					'</div>'
											
				),
		
		emptyText: 'No list found. Tap add button on the bottom to create a new list',
		onItemDisclosure: function(record){
									
			Ext.dispatch({
				controller: app.controllers.ListController,
				action: 'displayDetail',
				id: record.get('id'),
				animation: {type: 'slide', direction: 'left'}
			});
			
		}}
	],
	
	initComponent: function() {
		
		app.stores.checkLists.load();
		
		
						
		app.views.ListView.superclass.initComponent.apply(this, arguments);
		
	}
});

